class Confirm {
    constructor(){
        this.body = document.body; //获取 body 元素
        this.isOpen = false;
        this.style = window.getComputedStyle ? window.getComputedStyle(this.body, null) : this.body.currentStyle;//获取 body 元素的样式对象
        //添加确认框的 Html 代码到 body 元素内部的末尾
        this.body.insertAdjacentHTML("beforeend","<div id=\"confirm-container\">" +
            "        <div id=\"confirm\">" +
            "            <div id=\"confirm-header\"><span id=\"confirm-close\">×</span></div>" +
            "            <p id=\"confirm-main\"></p>" +
            "            <div id=\"confirm-footer\">" +
            "                <button id=\"confirm-yes\">确认</button>" +
            "                <button id=\"confirm-no\">取消</button>" +
            "            </div>" +
            "        </div>" +
            "    </div>");
        this.confirmContainer = document.getElementById("confirm-container");
        this.confirmMain = document.getElementById("confirm-main");
        this.confirmYes  = document.getElementById("confirm-yes");
        this.confirmNo = document.getElementById("confirm-no");
        this.confirmClose = document.getElementById("confirm-close");
        //获取滚动条的宽度
        this.body.insertAdjacentHTML("beforeend","<div id=\"_scrollWidth\" style=\"width: 50px;height: 50px;overflow: scroll;position: fixed;left: -50px;top:-50px\"></div>");
        const scrollDiv = document.getElementById("_scrollWidth");
        this.scrollWidth = scrollDiv.offsetHeight - scrollDiv.clientWidth;
        scrollDiv.parentNode.removeChild(scrollDiv);

        //绑定点击事件。
        const that = this;
        that.confirmYes.onclick = function (){
            //设置点击事件。
            // 1、把确认框隐藏。
            // 2、恢复 body 的 overFlow 属性值
            // 3、恢复 body 的 margin-right 属性值
            that.confirmContainer.style.display = "none";
            that.body.style.overflow = that.overFlow;
            that.body.style.marginRight = that.marginRight;
            that.isOpen = false; //弹出状态变为未弹出。
            that.callBack(); //执行点击确认后的回调函数
        };

        that.confirmNo.onclick = function () {
            that.confirmContainer.style.display = "none";
            that.body.style.overflow = that.overFlow;
            that.body.style.marginRight = that.marginRight;
            that.isOpen = false;
        };
        that.confirmClose.onclick = function () {
            that.confirmContainer.style.display = "none";
            that.body.style.overflow = that.overFlow;
            that.body.style.marginRight = that.marginRight;
            that.isOpen = false;
        };
        that.confirmContainer.onclick = function(event){
            event =  event || window.event;
            let target = event.target || event.srcElement;
            if(target.id==="confirm-container"){
                //判断点击事件的对象是不是遮罩层，是遮罩层才执行。
                that.confirmContainer.style.display = "none";
                that.body.style.overflow = that.overFlow;
                that.body.style.marginRight = that.marginRight;
                that.isOpen = false;
            }
        };





    }


    hasScrollbar(){
        //判断是否有窗口滚动条
        return this.style.overflow === "scroll" || (document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight));
    }


    show(obj){

        if(this.isOpen === true){
            //判断是否已经弹出确认框，如果已经弹出则不能再弹出。
            return ;
        }


        if(typeof obj !== "object"){
            throw new TypeError("errorMessage");
        }

        if(typeof obj.message !== "string" && typeof obj.message !== "number"){
            throw new TypeError("errorMessage");
        }

        if(typeof obj.yes !== "function"){
            throw new TypeError("errorMessage");
        }


        const that = this;// 保存 this 指针。
        that.overFlow = that.style.overflow; ////获取确认框弹出前 body 元素的 overflow 属性的值
        that.marginRight = that.style.marginRight;//获取确认框弹出前 body 元素的 margin-right 属性的值
        that.confirmMain.innerHTML = obj.message; //设置提示信息
        that.callBack = obj.yes;//获取点击确认按钮后执行的回调函数。
        that.confirmContainer.style.display = "flex"; //显示确认框
        that.isOpen = true;//弹出状态变成已弹出。
        if(this.hasScrollbar()===true){
            //如果有窗口滚动条
            that.body.style.overflow = "hidden"; //隐藏滚动条
            // 在 body 元素右边加上一个大小为滚动条宽度的 margin-right。
            that.body.style.marginRight = parseFloat(that.marginRight) + that.scrollWidth +"px";
        }

    }

}